<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html >
<html>
<head>

<script type="text/javascript" src="jsutil/jscharts.js"></script>
</head>




<body >
<div id="JScharts_div"></div>

	<div id="outside_div">
		
		<form id="day_search" onsubmit="return navTabSearch(this);" action="netSiteDayData?toResult=netSiteDay&rightId=${rightId}" method="post">
			<div class="pageHeader">
				<input type="hidden" name="init" value=0>				
				<div class="searchBar">
					<table class="searchContent">
						<tr>
							<td>年份: 
							<c:set value="${year}" var="selectYear" />
							<select id="year" name="year">
							<!-- 显示年份列表 -->
							<c:forEach var="years" items="${listyear}">								
								<c:if test="${years==selectYear}">
								<option  value="${years}" selected="selected">${years}</option>		
								</c:if>
								<c:if test="${years!=selectYear }">
								<option value="${years}">${years}</option>		
								</c:if>					
							</c:forEach> 
							</select>
							</td>
							<td>月份: 
							<select name="month">
							<s:if test="#request.month !=1">
									<option  value="1" >1月</option></s:if> 
							<s:elseif test="#request.month ==1">
								<option  value="1" selected="selected">1月</option></s:elseif>	
							<s:if test="#request.month !=2">
									<option  value="2" >2月</option></s:if> 
							<s:elseif test="#request.month ==2">
								<option  value="2" selected="selected">2月</option></s:elseif>					
							<s:if test="#request.month !=3">
									<option  value="3" >3月</option></s:if> 
							<s:elseif test="#request.month ==3">
								<option  value="3" selected="selected">3月</option></s:elseif>	
							<s:if test="#request.month !=4">
									<option  value="4" >4月</option></s:if> 
							<s:elseif test="#request.month ==4">
								<option  value="4" selected="selected">4月</option></s:elseif>									
							<s:if test="#request.month !=5">
									<option  value="5" >5月</option></s:if> 
							<s:elseif test="#request.month ==5">
								<option  value="5" selected="selected">5月</option></s:elseif>									
							<s:if test="#request.month !=6">
									<option  value="6" >6月</option></s:if> 
							<s:elseif test="#request.month ==6">
								<option  value="6" selected="selected">6月</option></s:elseif>									
							<s:if test="#request.month !=7">
									<option  value="7" >7月</option></s:if> 
							<s:elseif test="#request.month ==7">
								<option  value="7" selected="selected">7月</option></s:elseif>									
							<s:if test="#request.month !=8">
									<option  value="8" >8月</option></s:if> 
							<s:elseif test="#request.month ==8">
								<option  value="8" selected="selected">8月</option></s:elseif>									
							<s:if test="#request.month !=9">
									<option  value="9" >9月</option></s:if> 
							<s:elseif test="#request.month ==9">
								<option  value="9" selected="selected">9月</option></s:elseif>									
							<s:if test="#request.month !=10">
									<option  value="10" >10月</option></s:if> 
							<s:elseif test="#request.month ==10">
								<option  value="10" selected="selected">10月</option></s:elseif>									
							<s:if test="#request.month !=11">
									<option  value="11" >11月</option></s:if> 
							<s:elseif test="#request.month ==11">
								<option  value="11" selected="selected">11月</option></s:elseif>									
							<s:if test="#request.month !=12">
									<option  value="12" >12月</option></s:if> 
							<s:elseif test="#request.month ==12">
								<option  value="12" selected="selected">12月</option></s:elseif>	
													
							</select>
							</td>

							<td>快递公司: 
							<c:set value="${expressCompany}" var="company" />
							<select id="Charts_company" name="expressCompany">
							<option  value="all" >所有公司</option>
							
							<!-- 当选择分开显示时，分开显示被select 其他只显示 -->
							<s:if test="#request.expressCompany !='allpart'">
									<option  value="allpart" >分开显示</option></s:if> 
							<s:elseif test="#request.expressCompany =='allpart'">
								<option  value="allpart" selected="selected">分开显示</option></s:elseif>							
						
							<!-- 显示快递公司列表 -->
							<c:forEach var="companyItem" items="${listExpressCompany}">								
								<c:if test="${companyItem.name==company}">
								<option  value="${companyItem.name}" selected="selected">${companyItem.name}</option>		
								</c:if>
								<c:if test="${companyItem.name!=company }">
								<option value="${companyItem.name}">${companyItem.name}</option>		
								</c:if>	
										
							</c:forEach> 

							</select>
							</td>
							
							<!--状态列表  -->
							<td>订单状态: 
							<select name="orderStatus" id="order_Status">	
							<s:if test="#request.orderStatus !='allOrders'">
								<option  value="allOrders">所有订单</option></s:if> 
							<s:elseif test="#request.orderStatus =='allOrders'">
								<option  value="allOrders" selected="selected">所有订单</option>	</s:elseif>							
							<s:if test="#request.orderStatus !='NOT_ASSIGNED'">
								<option  value="NOT_ASSIGNED">等待接单</option></s:if> 
							<s:elseif test="#request.orderStatus =='NOT_ASSIGNED'">
								<option  value="NOT_ASSIGNED" selected="selected">等待接单</option>	</s:elseif>
							<s:if test="#request.orderStatus !='NETSITE_CANCELLED_NOTINAREA'">
								<option  value="NETSITE_CANCELLED_NOTINAREA">不在范围</option></s:if> 
							<s:elseif test="#request.orderStatus =='NETSITE_CANCELLED_NOTINAREA'">
								<option  value="NETSITE_CANCELLED_NOTINAREA" selected="selected">不在范围</option>	</s:elseif>	
							<s:if test="#request.orderStatus !='NETSITE_CANCELLED_MENDACIOUS'">
								<option  value="NETSITE_CANCELLED_MENDACIOUS">虚假订单</option></s:if> 
							<s:elseif test="#request.orderStatus =='NETSITE_CANCELLED_MENDACIOUS'">
								<option  value="NETSITE_CANCELLED_MENDACIOUS" selected="selected">虚假订单</option>	</s:elseif>	
							<s:if test="#request.orderStatus !='ACCEPTED'">
								<option  value="ACCEPTED">等待取件_未打印</option></s:if> 
							<s:elseif test="#request.orderStatus =='ACCEPTED'">
								<option  value="ACCEPTED" selected="selected">等待取件_未打印</option>	</s:elseif>	
							<s:if test="#request.orderStatus !='ACCEPTED_PRINTED'">
								<option  value="ACCEPTED_PRINTED">等待取件_已打印</option></s:if> 
							<s:elseif test="#request.orderStatus =='ACCEPTED_PRINTED'">
								<option  value="ACCEPTED_PRINTED" selected="selected">等待取件_已打印</option>	</s:elseif>	
							<s:if test="#request.orderStatus !='PICKED'">
								<option  value="PICKED">取件成功_未录入</option></s:if> 
							<s:elseif test="#request.orderStatus =='PICKED'">
								<option  value="PICKED" selected="selected">取件成功_未录入</option>	</s:elseif>	
							<s:if test="#request.orderStatus !='PICKED_INPUT'">
								<option  value="PICKED_INPUT">取件成功_已录入</option></s:if> 
							<s:elseif test="#request.orderStatus =='PICKED_INPUT'">
								<option  value="PICKED_INPUT" selected="selected">取件成功_已录入</option>	</s:elseif>	
							<s:if test="#request.orderStatus !='CANCELLED'">
								<option  value="CANCELLED">订单取消</option></s:if> 
							<s:elseif test="#request.orderStatus =='CANCELLED'">
								<option  value="CANCELLED" selected="selected">订单取消</option>	</s:elseif>														
<!-- 						<option  value="NOT_ASSIGNED">等待接单</option>	
							<option  value="NETSITE_CANCELLED_NOTINAREA">不在范围</option>
							<option  value="NETSITE_CANCELLED_MENDACIOUS">虚假订单</option>
							<option  value="ACCEPTED">等待取件</option>
							<option  value="PICKED">取件成功</option>
							<option  value="CANCELLED">订单取消</option> -->							
							</select>
							
							</td>
							
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
							<td>
								<div class="buttonActive">
									<div class="buttonContent">
										<button type="submit">曲线图</button>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</form>
			<div class="pageContent"  >
	
				<div class="panelBar">
					<ul class="toolBar">

					</ul>
				</div>
			</div>
			<div  layoutH="110" id="parentDiv">	
			<input id="JScharts_data" type="hidden" name="data" value="${data}">			
			<script type="text/javascript">
				var map=eval(${data});
				var nu=0;
		    	for(var key in map) {
	   				var div="<div style='width:100px;height:19px;'>"+key+"</div>";
	   				$("#parentDiv").append(div); 
		    		var div="<div id='chart_container_day"+nu+"'>Loading chart...</div>";
	   				$("#parentDiv").append(div); 
 
	   				nu++;
			    }  	
/* 		   		 for(var i=0;i<map.length;i++)
	   			 {
	   			 	var div="<div id='chart_container_day"+i+"'>Loading chart...</div>";
	   				$("#parentDiv").append(div); 
	   				var div="<div>"+i+"</div>";
	   				$("#parentDiv").append(div); 
	   			 }  */
			</script>  
		</div> 
		
		<script type="text/javascript">		
			var map=eval(${data});
			var nu=0;
			for(var key in map) {
				var name="chart_container_day"+nu;				   
				var myChart = new JSChart(name, 'line', '');
	    		var itemmap=map[key];
	    		var count=0;
	    		/* arrayList.length=0; */
	    		 i=0;
	    	    var arrayList=new Array();
		 		for(var itemkey in itemmap){			 			
		 			var arr=new Array();
			        arr[0]=itemkey;
			        arr[1]=itemmap[itemkey];
			        count+=arr[1];
			        arrayList[i]=arr; 
			       // myChart.setTooltip(arr);
			        i++;
		 		}
		 		myChart.setDataArray(arrayList,key);		 	
			   
				myChart.setSize(900, 200);	
	 			myChart.setAxisColor('#B7C611');//设置两轴的颜色
				myChart.setGridColor('#B7C611');//设置网格的颜色
				myChart.setAxisPaddingLeft(50);
/* 				 myChart.setAxisPaddingBottom(10);  
				myChart.setAxisPaddingTop(100);   */
				myChart.setAxisPaddingRight(100); 

				//myChart.setTooltip([0,'180']);//可圈出这个点
				myChart.setAxisValuesNumberY(5);//Y轴节点数（例如：Y轴数值最大值200，节点数5 则节点为0，50，100,150,200）
			//	myChart.setAxisValuesNumberX(12);
				myChart.setTitle(${year}+'-'+${month}+'  Total: '+count);
				myChart.setTitleFontSize(15);//设置title字体大小
				 myChart.setTitleColor('#3300FF'); 
				myChart.setIntervalEndY(${max});
				myChart.setIntervalStartY(0);//设置Y轴从0开始，如果不设置从最小值画
				myChart.setAxisNameX('day');//X轴name
				myChart.setAxisNameY('Num');//Y轴name
				myChart.setAxisNameFontSize(15);//轴name的大小
				myChart.setAxisNameColor('#00CCCC');//轴name的颜色
				myChart.setAxisValuesColor('#FF00FF');//轴值得颜色
				myChart.setShowXValues(false);//是否显示X轴数值
				//myChart.setIntervalEndY(150);//设置Y轴的最大值
				//myChart.setIntervalStartY(2);//设置Y轴的最小值
				//myChart.setIntervalEndX();
				//myChart.setAxisWidth(10); //设置两轴的线的宽度
				
				for (var int = 1; int <=${days}; int++) {
					myChart.setTooltip([int,'']);
					myChart.setLabelX([int,int]);
 			}
				myChart.draw();	
				nu++;
			}
	

			</script>  	
			
	</div>
	
	</body>
	
	

</html>